<template>
  <div class="table">
    <div v-if="showList">
      <Card :dis-hover="true" class="table-top">
        <div class="table-title">
          <span>{{ $t('myTestTab.tableName') }}</span>
          <div class="table-btn">
            <Button shape="circle" icon="ios-refresh" @click="refresh">{{ $t('common.refresh') }}</Button>
            <Button type="primary" shape="circle" icon="md-add" @click="add">{{ $t('common.add') }}</Button>
          </div>
        </div>
        <div class="searchGroup" id="searchHeight">
          <Row :gutter="10">
            <Col span="11">
              <Form ref="searchForm" :model="searchForm" :rules="formVerity" inline class="simpleSearch"
                    @keydown.native.enter.prevent="query(searchMore ? 'searchGroupForm': 'searchForm')">
                <FormItem prop="key">
                  <Select v-model="searchForm.key" @on-change="selcetChange" :disabled="searchMore ? true : false">
                    <Option value="name">{{$t('myTestTab.name')}}</Option>                  <!-- 普通输入 -->
                    <Option value="loginName">{{$t('myTestTab.loginName')}}</Option>        <!-- 自动补全 -->
                    <Option value="mobilePhone">{{$t('myTestTab.mobilePhone')}}</Option>    <!-- 数字 -->
                    <Option value="dtStart">{{$t('myTestTab.dtStart')}}</Option>            <!-- 下拉 -->
                    <Option value="createStamp">{{$t('myTestTab.createStamp')}}</Option>     <!-- 日期 -->
                  </Select>
                </FormItem>
                <FormItem prop="value" v-if="searchForm.key == 'name'">
                  <!-- 普通输入 -->
                  <Input v-model="searchForm.value" :placeholder="$t('common.enter')" clearable
                         :disabled="searchMore ? true : false"></Input>
                </FormItem>
                <FormItem prop="value" v-else-if="searchForm.key == 'loginName'">
                  <!-- 自动补全输入 远程接口-->
                  <Select class="custom-width" v-model="searchForm.value" clearable filterable remote :loading="loading"
                          :remote-method="remoteMethod" :placeholder="$t('common.enter')"
                          :disabled="searchMore ? true : false">
                    <Option v-for="(option, index) in options" :value="option.value" :key="index">{{option.value}}</Option>
                  </Select>
                </FormItem>
                <FormItem prop="value" v-else-if="searchForm.key == 'mobilePhone'">
                  <!-- 只能是数字 -->
                  <Input v-model="searchForm.value" :placeholder="$t('common.enter')" clearable :disabled="searchMore ? true : false"
                         @on-change="phoneChange"></Input>
                </FormItem>
                <FormItem prop="value" v-else-if="searchForm.key == 'dtStart'">
                  <!-- 下拉框 远程接口 -->
                  <Select class="custom-width" v-model="searchForm.value" clearable :placeholder="$t('common.select')"
                          :disabled="searchMore ? true : false">
                    <Option v-for="(option, index) in selectOption" :value="index" :key="index">{{option}}</Option>
                  </Select>
                </FormItem>
                <FormItem prop="value" v-else>
                  <DatePicker class="custom-width" v-model="searchForm.value" type="daterange" placement="bottom-start"
                              :placeholder="$t('common.select')"
                              @on-change="dateChange" :disabled="searchMore ? true : false" :editable="false"></DatePicker>
                </FormItem>
              </Form>
            </Col>
            <Col span="13">
              <Button type="primary" shape="circle" class="m-10" icon="ios-search"
                      @click="query(searchMore ? 'searchGroupForm': 'searchForm')">{{ $t('common.search') }}
              </Button>
              <Button shape="circle" @click="searchCollapse">{{ $t('common.AdvancedSearch') }}&nbsp;
                <Icon type="ios-arrow-down" v-show="!searchMore"/>
                <Icon type="ios-arrow-up" v-show="searchMore"/>
              </Button>
            </Col>
          </Row>
          <!-- 高级查询 -->
          <div v-if="searchMore" class="searchMore">
            <Form ref="searchGroupForm" :model="searchGroupForm" :rules="formVerity" inline
                  @keydown.native.enter.prevent="query(searchMore ? 'searchGroupForm': 'searchForm')">
              <FormItem prop="name">
                <span class="tag">{{ $t('myTestTab.name') }}</span>
                <Input type="text" v-model="searchGroupForm.name" clearable :placeholder="$t('common.enter')" style="width: auto"/>
              </FormItem>
              <FormItem prop="loginName">
                <span class="tag">{{ $t('myTestTab.loginName') }}</span>
                <Select class="custom-width" v-model="searchGroupForm.loginName" clearable filterable remote :loading="loading"
                        :remote-method="remoteMethod" :placeholder="$t('common.enter')">
                  <Option v-for="(option, index) in options" :value="option.value" :key="index">{{option.value}}</Option>
                </Select>
              </FormItem>
              <FormItem prop="mobilePhone">
                <span class="tag">{{ $t('myTestTab.mobilePhone') }}</span>
                <Input type="text" v-model="searchGroupForm.mobilePhone" clearable @on-change="mobilePhone"
                       :placeholder="$t('common.enter')" style="width: auto"/>
              </FormItem>
              <FormItem prop="dtStart">
                <span class="tag">{{ $t('myTestTab.dtStart') }}</span>
                <Select v-model="searchGroupForm.dtStart" clearable :placeholder="$t('common.select')" style="width: auto">
                  <Option v-for="(option, index) in selectOption" :value="index" :key="index">{{option}}</Option>
                </Select>
              </FormItem>
              <FormItem prop="createStamp">
                <span class="tag">{{ $t('myTestTab.createStamp') }}</span>
                <DatePicker class="custom-width" type="daterange" placement="bottom-start" :placeholder="$t('common.select')"
                            v-model="searchGroupForm.createStamp"
                            @on-change="dateChange" :editable="false"></DatePicker>
              </FormItem>
            </Form>
          </div>
        </div>
      </Card>
      <!-- 表格 -->
      <Table ref="tables"
             :columns="tableHeader"
             :data="tableData"
             :loading="loading"
             :height="tableHeight"
             border
             @on-selection-change="selectChange" :class="{searchOpen: searchOpen}"></Table>
      <!-- 底部按钮 -->
      <div class="tabelFooter">
        <div class="footerBtn">
          <Button shape="circle" icon="md-checkmark" @click="handleSelectAll()">{{ $t('common.checkAll') }}</Button>
          <Button shape="circle" icon="md-download" @click="exportExcel()">{{ $t('common.export') }}</Button>
          <Button shape="circle" icon="md-close" @click="batchDelete()">{{ $t('common.batchDelete') }}</Button>
        </div>
        <Page :total="this.total"
              :page-size="this.pSize"
              :current="this.pNum"
              :page-size-opts="[20, 50, 80]"
              size="small"
              show-elevator
              show-total
              show-sizer
              @on-change="changePage(searchMore ? 'searchGroupForm': 'searchForm', $event)"
              @on-page-size-change="changeSize"/>
      </div>
      <!-- 删除确认modal -->
      <Modal v-model="deleteModal"
             class-name="vertical-center-modal"
             width="360">
        <p slot="header" style="color:#f60;text-align:center">
          <Icon type="ios-information-circle"></Icon>
          <span>请确认是否删除下列已选项</span>
        </p>
        <div style="text-align:center">
          <Table border :columns="showSelcetList" :data="selectList" height="272" size="small"></Table>
        </div>
        <div slot="footer">
          <Button @click="cancel">取消</Button>
          <Button type="primary" @click="confirm">确定</Button>
        </div>
      </Modal>
    </div>

    <!--新增页-->
    <add-model v-else-if="addModel" :then="modelReturnFun" :then-ok="postAdd"></add-model>
    <!--详情页-->
    <details-model v-else-if="detailsModel" :then="modelReturnFun" :data="detailsData"></details-model>
    <!--修改页-->
    <editor-model v-else-if="editorModel" :then="modelReturnFun" :then-ok="postEdit" :data="editData"></editor-model>
  </div>
</template>

<script>
import { getPost, paramsFromJson, fromJson } from '@/libs/ajax.js' // 请求方法统一调用此文件，严禁重新书写或是改写改文件中的方法！
import { formatDate, paramsPackaging } from '@/libs/common.js' // 公共方法统一放入common.js文件中，严禁更换存放路径！
import * as Verify from '@/libs/verity' // 表单校验规则，统一写入此文件中，严禁更改存放路径！
import excel from '@/libs/excel' // 调用表格导出excel
import '@/assets/style/tableCommon.less' // 表格页公用样式，不休修改与复写！
import './myTestTab.less' // 自定义样式表，有类名冲突时，请另起类名，严禁直接复写组件原有类名的样式！

// 组件引用
import addModel from './add'
import detailsModel from './deta'
import editorModel from './edit'

export default {
  name: 'tables_page',
  components: {
    addModel,
    detailsModel,
    editorModel
  },
  data () {
    return {
      // 组件状态初始化
      showList: true,
      addModel: false,
      detailsModel: false,
      editorModel: false,
      searchMore: false,
      loading: false,
      selectLoading: false,
      deleteModal: false,
      searchOpen: false,
      allCheckbox: false,
      // 组件数据初始化
      editData: {},
      detailsData: {},
      selectOption: {},
      // 自动补全
      options: [],
      completionList: [],
      inputChange: '',
      // 单条件查询表单
      searchForm: {
        key: 'name',
        value: ''
      },
      // 多条件查询表单
      searchGroupForm: {
        name: '',
        loginName: '',
        mobilePhone: '',
        dtStart: '',
        createStamp: []
      },
      // 表单校验
      formVerity: {},
      // 表格相关初始化
      pSize: 20,
      pNum: 1,
      total: 0,
      tableHeight: 0,
      searchHeight: 0,
      tableHeader: [
        {
          type: 'selection',
          align: 'center',
          fixed: 'left',
          width: 60
        },
        {
          renderHeader: (h, params) => {
            return h('span', this.$t('myTestTab.loginName'))
          },
          key: 'loginName',
          width: 110,
          ellipsis: true, // 过长省略
          tooltip: true // 字符过长tooltip显示全部内容
        },
        {
          renderHeader: (h, params) => {
            return h('span', this.$t('myTestTab.name'))
          },
          key: 'name',
          width: 90
        },
        {
          renderHeader: (h, params) => {
            return h('span', this.$t('myTestTab.email'))
          },
          key: 'email',
          width: 180,
          ellipsis: true, // 过长省略
          tooltip: true // 字符过长tooltip显示全部内容
        },
        {
          renderHeader: (h, params) => {
            return h('span', this.$t('myTestTab.mobilePhone'))
          },
          key: 'mobilePhone',
          width: 140
        },
        {
          renderHeader: (h, params) => {
            return h('span', this.$t('myTestTab.address'))
          },
          key: 'address',
          width: 200,
          ellipsis: true, // 过长省略
          tooltip: true // 字符过长tooltip显示全部内容
        },
        {
          renderHeader: (h, params) => {
            return h('span', this.$t('myTestTab.dtStart'))
          },
          key: 'dtStart',
          width: 100,
          align: 'center',
          render: (h, params) => {
            const text = params.row.dtStart === true ? 'true' : 'false'
            const color = params.row.dtStart === true ? '#19be6b' : '#ed4014'
            return h('div', [
              h('span', {
                style: {
                  marginRight: '5px',
                  width: '12px',
                  height: '12px',
                  background: color,
                  borderRadius: '12px',
                  display: 'inline-block',
                  verticalAlign: 'middle'
                }
              }),
              h('strong', {
                style: {
                  display: 'inline-block',
                  verticalAlign: 'middle'
                }
              }, text)
            ])
          }
        },
        {
          renderHeader: (h, params) => {
            return h('span', this.$t('myTestTab.delSign'))
          },
          key: 'delSign',
          width: 100,
          align: 'center',
          render: (h, params) => {
            const text = params.row.delSign === true ? 'true' : 'false'
            const color = params.row.delSign === true ? '#19be6b' : '#ed4014'
            return h('div', [
              h('span', {
                style: {
                  marginRight: '5px',
                  width: '12px',
                  height: '12px',
                  background: color,
                  borderRadius: '12px',
                  display: 'inline-block',
                  verticalAlign: 'middle'
                }
              }),
              h('strong', {
                style: {
                  display: 'inline-block',
                  verticalAlign: 'middle'
                }
              }, text)
            ])
          }
        },
        {
          renderHeader: (h, params) => {
            return h('span', this.$t('myTestTab.remark'))
          },
          key: 'remark',
          width: 140
        },
        {
          renderHeader: (h, params) => {
            return h('span', this.$t('myTestTab.createStamp'))
          },
          key: 'createStamp',
          width: 130,
          sortable: true,
          align: 'center',
          render: (h, params) => {
            return h('div',
              formatDate(new Date(params.row.createStamp), 'yyyy-MM-dd')
            )
          }
        },
        {
          renderHeader: (h, params) => {
            return h('span', this.$t('myTestTab.createTxStamp'))
          },
          key: 'createTxStamp',
          width: 150,
          sortable: true,
          align: 'center',
          render: (h, params) => {
            return h('div',
              formatDate(new Date(params.row.createTxStamp), 'yyyy-MM-dd hh:mm')
            )
          }
        },
        {
          renderHeader: (h, params) => {
            return h('span', this.$t('myTestTab.lastupStamp'))
          },
          key: 'lastupStamp',
          width: 130,
          sortable: true,
          align: 'center',
          render: (h, params) => {
            const row = params.row
            const data = row.lastupStamp === undefined ? '' : formatDate(new Date(row.lastupStamp), 'yyyy-MM-dd')
            return h('div', data)
          }
        },
        {
          renderHeader: (h, params) => {
            return h('span', this.$t('myTestTab.lastupTxStamp'))
          },
          key: 'lastupTxStamp',
          width: 150,
          sortable: true,
          align: 'center',
          render: (h, params) => {
            const row = params.row
            const data = row.lastupStamp === undefined ? '' : formatDate(new Date(row.lastupStamp), 'yyyy-MM-dd hh:mm')
            return h('div', data)
          }
        },
        {
          renderHeader: (h, params) => {
            return h('span', this.$t('common.action'))
          },
          width: 200,
          align: 'center',
          fixed: 'right',
          render: (h, params, vm) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    // console.log(params.row)
                    this.detailsData = params.row
                    this.showList = false
                    this.detailsModel = true
                  }
                }
              }, this.$t('common.check')),
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.editData = params.row
                    this.showList = false
                    this.editorModel = true
                  }
                }
              }, this.$t('common.edit')),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    // console.log(params.row.recordId)
                    this.$Modal.confirm({
                      title: '温馨提示',
                      content: '是否确认删除？',
                      okText: '确定',
                      cancelText: '取消',
                      onOk: () => {
                        let postData = []
                        postData = fromJson([params.row.recordId])
                        getPost('/aut/myTestTab/del', postData, (data, all) => {
                          if (all.code === 'E0') {
                            this.refresh()
                            this.$nextTick(() => {
                              this.$Message.success({
                                content: '删除成功！',
                                duration: 3
                              })
                            })
                          }
                        })
                      }
                    })
                  }
                }
              }, this.$t('common.delete'))
            ])
          }
        }
      ],
      tableData: [
        {
          loginName: 'dsf',
          name: '测试',
          email: '1668079770@qq.com',
          mobilePhone: '13000000000',
          address: '四川成都',
          dtStart: true,
          delSign: true,
          remark: '没有想说的',
          createStamp: '2019-3-18',
          createTxStamp: '2019-3-18 10:28:00',
          lastupStamp: '2019-3-18',
          lastupTxStamp: '2019-3-18 10:28:30'
        }
      ],
      // 批量删除信息表格列队
      showSelcetList: [
        {
          title: '姓名',
          key: 'name'
        }
      ],
      // 数据暂存，便于调用
      selectIdList: [],
      selectList: [],
      dateStart: '',
      dateEnd: '',
      paramsData: {}
    }
  },
  methods: {
    // 单列查询时手机号校验
    phoneChange () {
      if (this.searchForm.key === 'mobilePhone') {
        this.formVerity = {
          value: [{ validator: Verify.num() }]
        }
      }
    },
    // 高级查询时手机号校验
    mobilePhone () {
      this.formVerity = {
        mobilePhone: [{ validator: Verify.num() }]
      }
    },
    // 选择单查询条件时
    selcetChange (value) {
      this.$refs.searchForm.resetFields() // 单列查询条件切换时清空已键入值
      this.searchForm.key = value // 切换对应搜索键入框
      this.searchForm.value = '' // 切换后对进行输入框初始化，避免日期选择条件后属性的类型变为数组问题
      if (this.searchForm.key !== 'mobilePhone') { // 不是手机号搜索条件时，清空校验规则，防止提交表单时校验进行拦截无法提交问题
        this.formVerity = {}
      }
    },
    // 自动补全
    remoteMethod (value) {
      this.inputChange = value
      if (value !== '') { // 键入时，获取键入值进行参数打包并发起请求
        this.selectLoading = true
        let postData = [] // 参数存放
        let params = { // 公共参数
          value: this.inputChange,
          operate: 'lk'
        }
        if (!this.searchMore) { // 单列查询时组合参数
          params.key = this.searchForm.key
        } else { // 高级查询时组合参数
          params.key = 'loginName'
        }
        postData = paramsFromJson(20, 1, params) // 参数格式化，固定查询20条
        getPost('/aut/myTestTab/loginNameSeleect', postData, (data, all) => {
          this.completionList = data.list
        })
        setTimeout(() => {
          this.selectLoading = false
          const list = this.completionList.map(item => { // 获取每条数据的loginName
            return {
              value: item.loginName
            }
          })
          this.options = list.filter(item => item.value.toLowerCase().indexOf(value.toLowerCase()) > -1) // 根据键入值进行过滤动态渲染选择列表
        }, 200)
      } else { // 无键入选择列表为空
        this.options = []
      }
    },
    // 导出表格数据
    exportExcel () {
      if (this.selectList.length) { // 有选中项时
        let titleList = []
        let keyList = []
        this.tableHeader.forEach(item => { // 遍历需导出的数据进行暂存
          if (item.key !== undefined) {
            titleList.push(item.title)
            keyList.push(item.key)
          }
        })
        const params = { // 组合需导出表格数据参数
          title: titleList,
          key: keyList,
          data: this.selectList,
          autoWidth: true,
          filename: '表格名称' // 导出文件的名称，此处获取当前页的标题
        }
        excel.export_array_to_excel(params) // 传入参数，调用导出文件插件导出文件
        this.$refs.tables.selectAll(this.allCheckbox = false) // 清空checkbox选中状态
      } else { // 无选中项提示
        this.$Modal.error({
          title: '温馨提示',
          content: '请先勾选要导出的项',
          okText: '确定'
        })
      }
    },
    // 新增
    add () {
      this.showList = false
      this.addModel = true
    },
    // 新增回调
    postAdd (data, all) {
      this.$Message.success({
        content: '添加成功！',
        duration: 3
      })
      this.refresh() // 添加成功刷新表格数据
    },
    // 编辑回调
    postEdit (data, all) {
      this.$Message.success({
        content: '修改成功！',
        duration: 3
      })
      this.refresh() // 删除成功刷新表格数据
    },
    // 判断当前子组件名称对应显示
    modelReturnFun (type) {
      this.showList = true
      if (type === 'edit') {
        this.editorModel = false
      }
      if (type === 'detail') {
        this.detailsModel = false
      }
      if (type === 'add') {
        this.addModel = false
      }
    },
    // 设置每页显示条数
    changeSize (size) {
      this.pSize = size
      this.refresh() // 设置后进行表格数据刷新
    },
    // 展开收起高级搜索区域
    searchCollapse () {
      this.searchMore = !this.searchMore
      if (this.searchMore === true) {
        this.searchOpen = true // 表格添加类名，用于高度计算
        this.$refs.searchForm.resetFields()
      } else {
        this.searchOpen = false // 表格删除类名，用于高度计算
        this.$refs.searchGroupForm.resetFields()
      }
    },
    // 全选时，修改checkbox状态
    handleSelectAll () {
      this.allCheckbox = !this.allCheckbox
      this.$refs.tables.selectAll(this.allCheckbox)
    },
    // 表格checkbox勾选时，选中项列队
    selectChange (selection) {
      let idList = []
      let list = []
      selection.forEach(row => {
        idList.push(row.recordId)
        list.push(row)
      })
      this.selectIdList = idList // 选中项id列队，用于删除提交
      this.selectList = list // 选中项数据列队，用于确认删除时展示
    },
    // 批量删除
    batchDelete () {
      // 判断是否有选中项
      if (this.selectIdList.length > 0) {
        this.deleteModal = !this.deleteModal
      } else {
        this.$Modal.error({
          title: '温馨提示',
          content: '请先勾选要删除的项',
          okText: '确定'
        })
      }
    },
    // 取消批量删除
    cancel () {
      this.deleteModal = !this.deleteModal
      // 清空已选中的数据id列队 关闭弹窗
      this.selectIdList = []
      this.selectList = []
      this.allCheckbox = false
      this.$refs.tables.selectAll(this.allCheckbox) // 清空表格checkbox选中状态
    },
    // 确认批量删除
    confirm () {
      let postData = []
      postData = fromJson(this.selectIdList) // 格式化参数
      getPost('/aut/myTestTab/del', postData, (data, all) => {
        this.refresh() // 成功后调用刷新方法
        this.$nextTick(() => {
          this.$Message.success({
            content: '删除成功！',
            duration: 3
          })
        })
      })
      this.deleteModal = !this.deleteModal
      // 清空已选中的id列队 关闭弹窗
      this.selectIdList = []
      this.allCheckbox = false
      this.$refs.tables.selectAll(this.allCheckbox) // 清空表格checkbox选中状态
    },
    // 日期选择器值改变时获取格式化后的日期并存储
    dateChange (date) {
      this.dateStart = date[0]
      this.dateEnd = date[1]
    },
    // 请求下拉框数据
    postQuerySelect () {
      getPost('/aut/myTestTab/startSeleect', {}, (data, all) => {
        this.selectOption = data
      })
    },
    // 请求表格数据
    postQuery (psize, pnum, paramsData) { // 接收查询所需参数
      let postData = []
      postData = paramsFromJson(psize, pnum, paramsData) // 参数包格式化
      // console.log(postData)
      this.loading = true
      getPost('/aut/myTestTab/findList', postData, (data, all) => {
        // console.log(data.list) //成功获取数据
        this.pSize = data.psize
        this.pNum = data.pnum
        this.total = data.total
        this.tableData = data.list
        this.loading = false
      })
    },
    // 刷新时
    refresh () {
      this.loading = true
      this.postQuery(this.pSize, 1) // 初始化查询
      if (!this.searchMore) { // 清空单列查询
        this.$refs.searchForm.resetFields()
      } else { // 清空高级查询
        this.$refs.searchGroupForm.resetFields()
      }
      this.$nextTick(() => {
        this.loading = false
      })
    },
    // 点击分页时
    changePage (formName, pnum) { // 获取当前表单是单列还是高级及点击的当前页码
      this.pNum = pnum
      this.params(formName) // 根据不同表单进行参数打包
      this.postQuery(this.pSize, this.pNum, this.paramsData) // 调用post方法并传入参数包
    },
    // 点击查询时
    query (formName) { // 获取当前表单是单列还是高级
      this.params(formName) // 执行
      // 不同条件传参
      if (this.paramsData === undefined) { // 参数不存在时，初始化psize,pnum查询
        this.pNum = 1
        this.postQuery(this.pSize, this.pNum)
      } else if (!this.searchMore) { // 单列查询时（两种情况）
        if (this.paramsData === undefined) { // 处理1、参数不存在时
          this.pNum = 1
          this.postQuery(this.pSize, this.pNum)
        } else { // 参数存在并传参
          this.postQuery(this.pSize, 1, this.paramsData)
        }
      } else { // 高级查询时，参数存在并传参
        this.postQuery(this.pSize, 1, this.paramsData)
      }
    },
    // 参数打包
    params (formName) {
      // 根据传入的formName 得到不同表单进行校验
      this.$refs[formName].validate((valid) => {
        if (valid) { // 校验通过
          this.paramsData = paramsPackaging(this.searchMore, this.searchForm, this.searchGroupForm, this.dateStart, this.dateEnd)
        }
      })
    },
    setTableHeight () { // 计算table及查询栏高度
      setTimeout(() => {
        this.searchHeight = document.getElementById('searchHeight').offsetHeight
        // this.tableHeight = window.innerHeight - 248 - this.searchHeight // 整合时高度数值需加104
        this.tableHeight = window.innerHeight - 144 - this.searchHeight
      }, 100)
    }
  },
  watch: {
    isFullScreen () { // 监听全屏时table高度变化
      this.setTableHeight()
    },
    searchMore () { // 监听高级查询展开时查询栏高度变化
      this.setTableHeight()
    }
  },
  computed: {
    isFullScreen () { // 获取当前是否全屏
      return this.$store.state.app.isFullScreen
    }
  },
  mounted () {
    this.setTableHeight() // 初始化调用计算高度
    // this.postQuerySelect() // 请求下拉数据
    // this.postQuery(this.pSize, this.pNum) // 初始化查询数据
  }
}
</script>
